<template>
  <div class="evstore">
    <div class="evstore-banner"></div>
    <div class="tab-list">
      <div class="list-item" v-for="(item, index) in tabList" :key="index">
        <img :src="item.icon" />
        <div class="item-title">{{ item.title }}</div>
        <div class="item-desc">{{ item.desc }}</div>
        <div
          class="item-num"
          :style="{ marginBottom: item.num2 ? '' : '15px' }"
          v-if="item.num"
        >
          <span v-if="item.title1">{{ item.title1 }}</span> ¥ {{ item.num }}/{{
            item.numtitle
          }}
        </div>
        <div v-if="item.num2" class="item-title1">原价 ：{{ item.num2 }}</div>
        <div class="item-btn2" v-if="item.btnType == 2">
          <div class="btn2">点击购买</div>
        </div>
        <div class="item-btn" v-else>
          <div style="border-radius: 0 0 0 9px" class="btn1">
            {{
              item.btnType == 3
                ? "套餐详情"
                : item.btnType == 4
                ? "立即下载"
                : item.btnType == 5
                ? "资费标准"
                : "windows下载"
            }}
          </div>
          <div style="border-radius: 0 0 9px 0; color: #f69b44" class="btn2">
            点击购买
          </div>
        </div>
      </div>
    </div>
    <div class="programme">
      <div
        class="programme-item"
        v-for="(item, index) in programmeList"
        :key="index"
        :class="['programme-item' + index]"
      >
        <div class="item-title">{{ item.title }}</div>
        <div class="look-detail">查看详情></div>
      </div>
    </div>
  </div>
</template>

<script scope setup>
import { ref, reactive, toRefs } from "vue";
import img1 from "@/assets/evstore/icon_evluping@2x.png";
import img2 from "@/assets/evstore/icon_evjianji@2x.png";
import img3 from "@/assets/evstore/icon_evshipingzhuanhuan@2x.png";
import img4 from "@/assets/evstore/icon_zuhe@2x.png";
import img5 from "@/assets/evstore/icon_evtouping@2x.png";
import img6 from "@/assets/evstore/icon_evcam@2x.png";
import img7 from "@/assets/evstore/store_icon_kuozhanp@2x.png";
import img8 from "@/assets/evstore/icon_evpingmugongxiang@2x.png";
import img9 from "@/assets/evstore/icon_evjiami@2x.png";
import img10 from "@/assets/evstore/icon_evjiami2@2x.png";
import img11 from "@/assets/evstore/icon_evduoliao@2x.png";
import img12 from "@/assets/evstore/icon_evhudong@2x.png";
import img13 from "@/assets/evstore/icon_evcloudenc@2x.png";
import img14 from "@/assets/evstore/icon_evyuanchengxiezhu@2x.png";
let data = reactive({
  tabList: [
    {
      title: "EV录屏",
      desc: "简单易用的录屏软件",
      num: "36",
      numtitle: "季",
      icon: img1,
      link: "https://ctpublic.ieway.cn/public/download/EVCapture_v5.2.3.exe",
    },
    {
      title: "EV剪辑",
      desc: "简单易用的剪辑软件",
      num: "36",
      numtitle: "季",
      icon: img2,
      link: "https://ctpublic.ieway.cn/public/download/EVAVEdit_Mac_v2.3.1.zip",
      btnType: 4,
    },
    {
      title: "EV视频转换器",
      desc: "多功能音视频转换工具",
      num: "36",
      numtitle: "季",
      icon: img3,
      link: "https://ctpublic.ieway.cn/public/download/EVMVConvert_v2.1.1.exe",
    },
    {
      title: "EV录屏三端套餐",
      desc: "win端+安卓端+iOS端",
      num: "208",
      numtitle: "年",
      icon: img4,
      title1: "活动价：",
      btnType: 2,
      num2: 322,
    },
    {
      title: "组合会员套餐",
      desc: "支持多个产品搭配组合",
      num: "192",
      numtitle: "年",
      icon: img4,
      btnType: 3,
    },
    {
      title: "EV投屏",
      desc: "超清流畅的手机投屏软件",
      num: "36",
      numtitle: "季",
      icon: img5,
    },
    {
      title: "EV虚拟摄像头",
      desc: "让手机秒变电脑高清摄像头和麦克风支持android、iOS手机",
      num: "",
      numtitle: "",
      icon: img6,
      btnType: 4,
    },
    {
      title: "EV扩展屏",
      desc: "让平板/手机变成电脑的第二个屏幕",
      num: "36",
      numtitle: "季",
      icon: img7,
    },
    {
      title: "EV屏幕共享",
      desc: "多人局域网屏幕共享工具",
      num: "48",
      numtitle: "季",
      icon: img8,
      btnType: 4,
    },
    {
      title: "EV加密",
      desc: "支持一机一码的视频加密软件",
      num: "",
      numtitle: "",
      icon: img9,
      btnType: 5,
    },
    {
      title: "EV加密2",
      desc: "云端同步上传、一键加密",
      num: "",
      numtitle: "",
      icon: img10,
      btnType: 5,
    },
    {
      title: "EV多聊",
      desc: "简单实用的微信多开软件",
      num: "36",
      numtitle: "季",
      icon: img11,
    },

    {
      title: "EV直播助手",
      desc: "轻松开启推流直播",
      num: "36",
      numtitle: "季",
      icon: img5,
    },

    {
      title: "EV互动",
      desc: "局域网视频会议工具",
      num: "58",
      numtitle: "季",
      icon: img12,
    },

    {
      title: "EV云加密",
      desc: "一站式管理的视频加密授权软件",
      num: "198",
      numtitle: "年",
      icon: img13,
    },

    {
      title: "录+剪(安卓版)",
      desc: "安卓手机录屏剪辑实用工具",
      num: "15",
      numtitle: "月",
      icon: img1,
    },

    {
      title: "录+剪(iOS版)",
      desc: "苹果手机录屏剪辑实用工具",
      num: "25",
      numtitle: "月",
      icon: img1,
    },

    {
      title: "EV直播助手(安卓版)",
      desc: "手机虚拟直播间搭建工具",
      num: "15",
      numtitle: "月",
      icon: img9,
    },

    {
      title: "EV远程协助",
      desc: "企业级稳定的远程协助工具",
      num: "36",
      numtitle: "月",
      icon: img14,
    },
  ],
  programmeList: [
    { title: "解决方案", icon: "" },
    { title: "政府采购", icon: "" },
    { title: "渠道合作", icon: "" },
  ],
});

let { tabList, programmeList } = toRefs(data);
</script>
<style lang="less" scope>
.evstore {
  background: #f2f0ed;
  padding-bottom: 30px;

  .evstore-banner {
    background: url("https://ctpublic.ieway.cn/public/v5/imgs/evstore/pic_bigbanner@2x_20240909.png")
      bottom center no-repeat;
    background-size: 1995px;
    width: 100%;
    height: 260px;
    cursor: pointer;
  }
  .tab-list {
    width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    .list-item {
      position: relative;
      width: 279px;
      height: 269px;
      //   height: 269px;
      background: #ffffff;
      border-radius: 9px;
      text-align: center;
      margin-bottom: 20px;
      margin-right: 20px;
      img {
        width: 70px;
        height: 70px;
        margin-top: 22px;
        cursor: pointer;
      }
      .item-title {
        font-size: 16px;
        color: #474747;
        margin: 10px 0 17px 0;
      }
      .item-desc {
        font-size: 14px;
        color: #999999;
        margin-bottom: 16px;
      }
      .item-num {
        height: 25px;
        font-size: 18px;
        color: #f69b44;
        // margin-bottom: 14px;
      }
      .item-title1 {
        text-decoration: line-through;
        color: #999999;
      }
      .item-btn {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 0;
        div {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 140px;
          height: 48px;
          text-align: center;
          border: 1px solid #ebebeb;
          font-size: 16px;
        }
        .btn1:hover {
          border: 1px solid #f69b44;
          color: #f69b44;
        }
        .btn2:hover {
          background: #f69b44;
          color: #fff !important;
        }
      }
      .item-btn2 {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom-left-radius: 9px;
        border-radius: 0 0 9px 9px;
        color: #f69b44;
        text-align: center;
        border: 1px solid #ebebeb;
        font-size: 16px;
        height: 48px;
      }
      .item-btn2:hover {
        background: #f69b44;
        color: #fff !important;
      }
    }
    .list-item:nth-child(4n) {
      margin-right: 0;
    }
  }
  .programme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1180px;
    margin: 0 auto;
    .programme-item {
      // background: url(https://ctpublic.ieway.cn/public/v5/imgs/evstore/banner_jiejue@2x.png)
      //   bottom center no-repeat;
      width: 376px;
      height: 160px;
      position: relative;
      .item-title {
        font-family: MicrosoftYaHei-Bold;
        font-size: 24px;
        color: #ffffff;
        letter-spacing: 1px;
        font-weight: 700;
        position: absolute;
        left: 16px;
        top: 34px;
      }
      .look-detail {
        width: 102px;
        height: 30px;
        background: #ffffff;
        border-radius: 15px;
        text-align: center;
        line-height: 30px;
        font-family: PingFangSC-Medium;
        font-size: 12px;
        color: #3c7afb;
        letter-spacing: 0.67px;
        font-weight: 500;
        position: absolute;
        left: 14px;
        top: 92px;
      }
    }
    .programme-item0 {
      background: url("../../assets/evstore/banner_jiejue@2x.png") bottom center
        no-repeat;
      background-size: cover;
    }
    .programme-item1 {
      background: url("../../assets/evstore/purchase.png") bottom center
        no-repeat;
      background-size: cover;
    }
    .programme-item2 {
      background: url("../../assets/evstore/channel-cooperation.png") bottom
        center no-repeat;
      background-size: cover;
    }
  }
}
</style>
